let wrap = $(".wrap");
//下一个：右侧箭头
let next = $(".arrow_right");
//前一个：左侧箭头
let prew = $(".arrow_left");
//一组数字按钮
let btns = $(".buttons span");
let container=$(".container");
var hhh = 0;
next.click(function () {
    // 带 px
    // console.log(wrap.css("left"));
    // 数字
    // console.log(wrap.position().left);
    //获取元素刚开始的left
    // _next();

    _next();

});
function _next() {
    let left = parseInt(wrap.position().left);
    if(left%600!=0){
        return;
    }
    let s=0;
    if (left == -2400) {
        left = 0;
        s=0;
    } else {
        left -= 600;
        s=1;
    }
    hhh += 1;
    hhh = hhh == 5 ? 0 : hhh;
    colorChange(hhh);
    wrap.css({transition:`all ${s}s `});
    wrap.css({ left: `${left}px` });
    // console.log(wrap.css('left'));
}

prew.click(function () {
    _prew();
});
function _prew() {
    let left = parseInt(wrap.position().left);
    if(left%600!=0){
        return;
    }
    let s=1;
    if (left == 0) {
        left = -2400;
        s=0;
    } else {
        left += 600;
        s=1;
    }
    hhh -= 1;
    hhh = hhh == -1 ? 4 : hhh;
    colorChange(hhh);
    wrap.css({transition:`all ${s}s `});
    wrap.css({ left: `${left}px` });
    // console.log(wrap.css('left'));
}
btns.click(function () {
    //获取当前项的下标
    let curr = $(this).index();
    showBtn(curr);
    //console.log(curr);

});
//显示当前按钮
function showBtn(curr) {
    wrap.css({ left: `${-curr * 600}px` });
    colorChange(curr);
    // console.log("curr"+curr);
    // btns.removeClass("on").eq(curr).addClass("on");
}
function colorChange(curr) {
    hhh = curr;
    btns.removeClass("on").eq(hhh).addClass("on");
    // console.log("hhh"+hhh);
}


var autoindex = 0, timer = null;

function autoPlay() {
    _next();
    
    timer = setTimeout(autoPlay, 2000);
}

// 鼠标进入 时触发
container.mouseenter(function () {
    clearTimeout(timer);
});

// 离开时触发
container.mouseleave(function () {
    autoPlay();
});


autoPlay();